<template>
  <div class="wrapper">
    <u-navbar title="投诉详情">
      <div
        slot="right"
        v-if="complaintInfo.complainStatus === 'WAIT_APPEAL'"
        @click="appeal"
        class="done"
      >
        <span>申诉</span>
      </div>
    </u-navbar>
    <div class="box">
      <!-- 商品信息 -->
      <div class="flex goods-item">
        <div>
          <u-image width="150" height="150" :src="complaintInfo.goodsImage" mode="" />
        </div>
        <div class="wes-2 goods-name">{{ complaintInfo.goodsName }}</div>
        <!-- 价格 -->
        <div class="flex goods-right-col">
          <div>
            x <span>{{ complaintInfo.num }}</span>
          </div>
        </div>
      </div>
    </div>
    <u-gap bg-color="#f7f7f7"></u-gap>
    <!-- 投诉申请 -->
    <div class="box">
      <div class="title">投诉申请</div>
      <div class="goods-total">
        <div class="flex col">
          <div>投诉状态</div>
          <div>{{ complaintInfo.complainStatus | complainStatusList }}</div>
        </div>
        <div class="flex col">
          <div>投诉商品</div>
          <div>{{ complaintInfo.goodsName }}</div>
        </div>

        <div class="flex col">
          <div>投诉时间</div>
          <div>{{ complaintInfo.createTime }}</div>
        </div>
        <div class="flex col">
          <div>投诉主题</div>
          <div>{{ complaintInfo.complainTopic }}</div>
        </div>
        <div class="flex col">
          <div>投诉内容</div>
          <div>{{ complaintInfo.content }}</div>
        </div>
        <div class="flex col">
          <div>凭证</div>
          <div v-if="memberComplaint == ''">暂无</div>
          <div v-else style="display: grid">
            <u-image
              @click="preview(memberComplaint, index)"
              class="image"
              width="150"
              height="150"
              :src="item"
              v-for="(item, index) in memberComplaint"
              :key="index"
            ></u-image>
          </div>
        </div>
      </div>
    </div>
    <u-gap bg-color="#f7f7f7"></u-gap>

    <!-- 仲裁结果 -->
    <div class="box" v-if="complaintInfo.complainStatus === 'COMPLETE'">
      <div class="title">仲裁结果</div>
      <div class="flex col">
        <div>仲裁意见</div>
        <div>
          {{ complaintInfo.arbitrationResult }}
        </div>
      </div>
    </div>
    <div class="box">
      <div class="title">对话详情</div>
      <div
        class="take-col"
        v-for="(item, index) in complaintInfo.orderComplaintCommunications"
        :key="index"
      >
        <div v-if="item.owner === 'STORE'">商家[{{ item.createTime }}]</div>
        <div v-if="item.owner === 'BUYER'">买家[{{ item.createTime }}]</div>
        <div v-if="item.owner === 'PLATFORM'">平台[{{ item.createTime }}]</div>
        <div style="word-break: break-all">{{ item.content }}</div>
      </div>

      <div class="reply">
        <u-input type="textarea" v-model="params.content" :custom-style="inputStyle" />
        <div class="submit" @click="handleReply">回复</div>
      </div>
    </div>
    <u-gap bg-color="#f7f7f7"></u-gap>
    <!-- 商家处理 -->
    <div class="box" v-if="complaintInfo.serviceStatus != 'APPLY'">
      <div class="title">商家申诉信息</div>

      <div class="flex col">
        <div>申诉时间</div>
        <div>{{ complaintInfo.appealTime || "暂无" }}</div>
      </div>
      <div class="flex col">
        <div>申诉内容</div>
        <div>{{ complaintInfo.appealContent || "暂无" }}</div>
      </div>
      <div class="flex col">
        <div>凭证</div>
        <div v-if="appealImages.length == 0">暂无</div>
        <div v-else style="display: grid">
          <u-image
            @click="preview(appealImages, index)"
            class="image"
            width="150"
            height="150"
            :src="item"
            v-for="(item, index) in appealImages"
            :key="index"
          ></u-image>
        </div>
      </div>
    </div>
    <u-gap bg-color="#f7f7f7"></u-gap>

    <!-- 订单相关信息 -->
    <div class="box">
      <div class="title">订单相关信息</div>
      <div class="flex col">
        <div>订单编号</div>
        <div>{{ complaintInfo.orderSn }}</div>
      </div>
      <div class="flex col">
        <div>下单时间</div>
        <div>{{ complaintInfo.orderTime }}</div>
      </div>
      <div class="flex col">
        <div>订单金额</div>
        <div>{{ complaintInfo.orderPrice | unitPrice("￥") }}</div>
      </div>
    </div>
    <u-gap bg-color="#f7f7f7"></u-gap>
    <!-- 收件人 -->
    <div class="box">
      <div class="title">收件人信息</div>
      <div class="flex col">
        <div>收件人</div>
        <div>{{ complaintInfo.consigneeName }}</div>
      </div>
      <div class="flex col">
        <div>收货地址</div>
        <div>{{ complaintInfo.consigneeAddressPath }}</div>
      </div>
      <div class="flex col">
        <div>收货人手机</div>
        <div>{{ complaintInfo.consigneeMobile }}</div>
      </div>
    </div>
    <u-gap bg-color="#f7f7f7"></u-gap>
  </div>
</template>

<script>
import { getComplainDetail, addOrderComplaint } from "@/api/order";
export default {
  data() {
    return {
      complaintInfo: {}, //投诉详情
      routerVal: "",
      memberComplaint: [], //会员申诉图片
      appealImages: [], //商家
      params: {
        complainId: "",
        content: "",
      }, //传值
      inputStyle: {
        background: "#f7f7f7",
        "padding-left": "20rpx",
        "border-radius": "10rpx",
      },
    };
  },
  onLoad(options) {
    this.routerVal = options;
  },
  onShow() {
    this.init();
  },
  methods: {
    /**
     * 点击图片放大或保存
     */
    preview(urls, index) {
      uni.previewImage({
        current: index,
        urls: urls,
        longPressActions: {
          itemList: ["保存图片"],
          success: function (data) {},
          fail: function (err) {},
        },
      });
    },

    // 商家申诉
    appeal(val) {
      uni.navigateTo({
        url: `/pages/order/complaint/appeal?id=${this.routerVal.id}`,
      });
    },

    // 回复对话
    async handleReply() {
      if (this.params.content) {
        this.params.complainId = this.routerVal.id;
        let res = await addOrderComplaint(this.params);
        if (res.data.success) {
          uni.showToast({
            title: "对话成功",
            duration: 2000,
            icon: "none",
          });
          this.params.content = "";
          this.init();
        }
      } else {
        uni.showToast({
          title: "请输入回复内容",
          duration: 2000,
          icon: "none",
        });
      }
    },

    // 初始化投诉详情
    async init() {
      let res = await getComplainDetail(this.routerVal.id);
      if (res.data.success) {
        let info = res.data.result;
        this.memberComplaint = info.images ? (info.images || "").split(",") : [];
        this.appealImages = info.appealImages ? (info.appealImages || "").split(",") : [];
        this.params.actualRefundPrice = info.flowPrice;
        this.complaintInfo = info;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.submit {
  margin: 40rpx auto;
}
.reply {
  background-color: #fff;
  margin-top: 40rpx;
}
.wrapper {
  padding-bottom: 200rpx;
}
.box {
  padding: 32rpx;
}

.title {
  font-size: 32rpx;
}
.detail {
  justify-content: space-between;
  border-radius: 20rpx;
  font-size: 30rpx;
  font-weight: bold;
}
.goods-name {
  margin-left: 20rpx !important;
  flex: 3;
}
.title {
  margin-bottom: 20rpx;
}
.goods-total {
  display: flex;
  flex-direction: column;
  margin-top: 20rpx;
}
.col {
  overflow: hidden;
  justify-content: space-between;
  margin: 10rpx 0;
  line-height: 1.75;

  > div:nth-of-type(1) {
    font-size: 24rpx;
    color: #999;
    flex: 3;
    display: flex;
    justify-content: flex-start;
  }
  > div:nth-of-type(2) {
    line-height: 1.5;
    font-weight: bold;
    flex: 10;
    margin-left: 20rpx;
    > span {
      font-size: 40rpx;
      margin-left: 10rpx;
    }
  }
  > div {
    margin: 0 4rpx;
    display: flex;

    align-items: center;
    justify-content: flex-end;
  }
}
.image {
  margin: 10rpx;
}

.done {
  margin-right: 32rpx;
  font-weight: bold;
}

.take-col {
  font-size: 24rpx;
  padding: 10rpx 0;
  word-break: break-all;
  > div:nth-of-type(1) {
    margin-bottom: 5rpx;
    color: #999;
  }
}
</style>
